<template>
	<view class="page">
		<view class="Info">
			<view class="item flex-box" style="margin-top: 0;">
				<text class="name">预约状态</text>
				<!-- 0待审核 1已完成 2审核未通过 -->
				<text class="msg" v-if='pageData.sncode_flag == 0'>待处理</text>
				<text class="msg" v-if='pageData.sncode_flag == 1'>已完成</text>
				<text class="msg" v-if='pageData.sncode_flag == 2'>已拒绝</text>
				<text class="msg" v-if='pageData.sncode_flag == 3'>审核中</text>
			</view>
		</view>
		<view class="Info">
			<view class="title">预约信息</view>
			<view class="item flex-box">
				<text class="name">预约单号</text>
				<text class="msg">{{ pageData.sncode_number?pageData.sncode_number:'--' }}</text>
			</view>
			<view class="item flex-box">
				<text class="name">提交时间</text>
				<text class="msg">{{ pageData.sncode_addtime?pageData.sncode_addtime:'--' }}</text>
			</view>

			<view class="item flex-box" v-if='list.length > 0' v-for="(item,i) in list" :key='i'>
				<text class="name">{{ item.key }}</text>
				<text class="msg flex" v-if='item.type == 1'>{{ item.value?item.value:'--' }}</text>
				<view class="pics flex-box" v-if='item.type == 2'>
					<view class="pic" v-for="(p,i) in item.value.split('，')" :key='i' @click="prevImg(item.value.split('，'),i)">
						<image class="img" :src="$imgUrls(p)" mode="aspectFill"></image>
						<image src="/static/icon-scale.png" class="icon-scale"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="Info" v-if='pageData.sncode_content'>
			<view class="title" v-if='pageData.sncode_flag == 0'>待处理</view>
			<view class="title" v-if='pageData.sncode_flag == 1'>已完成</view>
			<view class="title" v-if='pageData.sncode_flag == 2'>已拒绝</view>
			<view class="title" v-if='pageData.sncode_flag == 3'>审核中</view>
			<view class="reason">{{ pageData.sncode_content }}</view>
		</view>
		
		<view class="btn-box flex-box">
			<view class="contact" @click="contact">联系客户</view>
			<view class="btn flex" @click="showAdjustment = true">核销订单</view>
		</view>
		<!-- 修改价格 -->
		<view class="mask flex-box flex-center align-center" v-if='showAdjustment' @click="showAdjustment = false">
			<view class="adjustment" @click.stop>
				<view class="title">核销订单</view>
				<view class="msg">
					<view class="satets flex-between">
						<view @click="exState = exState==1?-1:1" :class="{active:exState==1}">确认</view>
						<view @click="exState = exState==3?-1:3" :class="{active:exState==3}">审核中</view>
						<view @click="exState = exState==2?-1:2" :class="{active:exState==2}">拒绝</view>
					</view>
					<view class="item flex-box align-center">
						<input type="text" v-model="reason" placeholder="请输入原因" class="flex" placeholder-class="pla"/>
					</view>
				</view>
				<view class="btns flex-box">
					<view class="cancel" @click="showAdjustment = false">取消</view>
					<view class="ok" @click="WriteOff">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				price: '0',
				num: 1,
				stock: 10,
				showAdjustment: false,
				pageData:'',
				sncode_id:'',
				exState: 1,
				reason:'',
				list:[]
			};
		},
		onLoad(e) {
			that = this
			if(e.shop_id){
				uni.setStorageSync('store_id',e.shop_id)
			}
			if(e.id){
				that.sncode_id = e.id
				that.getSncodeInfo()
			}
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		methods:{
			contact(){
				if(that.pageData.service_state == 11){// 开启了客服系统
					that.toUrl('/pages/message/consult?id='+that.pageData.v_id)
				}else{
					uni.makePhoneCall({
						phoneNumber: that.pageData.sncode_user_mobi
					})
				}
			},
			prevImg(data,i){
				let arry = []
				data.forEach((item)=>{
					item = that.$imgUrls(item)
					arry.push(item)
				})
				uni.previewImage({
					current: i,
					urls: arry,
					indicator: "number"
				})
			},
			getSncodeInfo(){
				that.$http.get({
					url: '/singleSaleManageApi/getSncodeInfo',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						sncode_id: that.sncode_id
					}
				}).then(res => {
					if(res.code == 200 && res.data){
						if(res.data.sncode_remark){
							that.list = []
							res.data.sncode_remark = res.data.sncode_remark.split('|')
							res.data.sncode_remark.forEach(item=>{
								let str = item
								let index = item.indexOf(',')
								item = {
									type: 1,// 1普通内容 2图片
									key:'',
									value:''
								}
								item.key = str.slice(0,index)
								item.value = str.slice(index+1,str.length)
								if (str.indexOf('/Uploads') > -1 && str.indexOf('.') > -1) {
									item.type =  2
								}
								that.list.push(item)
							})
						}
						that.pageData = res.data
					}
				})
			},
			
			WriteOff(){
				if(that.exState == -1){
					uni.showToast({
						title:'请先选择核销状态',
						icon: 'none'
					})
					return
				}
				that.$http.post({
					url: '/singleSaleManageApi/checkSncode',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						sncode_id: that.sncode_id,
						sncode_content: that.reason, //管理员回复
						sncode_flag: that.exState// 0未使用 1已操作 2停用 3审核中
					}
				}).then(res => {
					if(res.code == 200){
						that.showAdjustment = false
						that.getSncodeInfo()
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	padding: $page-space;
	
	
	.Info{
		padding: $page-space;
		margin-bottom: $page-space;
		border-radius: $border-radius-base;
		background-color: #FFFFFF;
		position: relative;
		z-index: 3;
		.title{
			color: #999999;
			font-weight: 400;
			color: #999999;
			font-size: 24rpx;
		}
		.price-mini{
			color: $uni-color-price;
			font-size: 22rpx;
			align-self: flex-end;
		}
		.msg{
			font-size: 28rpx;
		}
		.icon-more{
			font-size: 32rpx;
		}
		.name{
			color: #666666;
			font-size: 28rpx;
			margin-right: 30rpx;
			min-width: 112rpx;
		}
		.item{
			margin-top: 20rpx;
			.myPrice{
				color: $uni-color-price;
				font-size: 28rpx;
			}
			.copy{
				color: $uni-color-primary;
			}
		}
		.icon{
			width: 40rpx;
			height: 40rpx;
		}
		.reason{
			font-size: 28rpx;
			color: #000000;
			margin-top: 20rpx;
		}
		.pics{
			.pic{
				width: 48rpx;
				height: 48rpx;
				position: relative;
				margin-right: 8rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 8rpx 8rpx 0 8rpx;
				}
				.icon-scale{
					position: absolute;
					right: 0;
					bottom: 0;
					width: 24rpx;
					height: 24rpx;
					background-color: rgba(0,0,0,.5);
					padding: 4rpx;
					border-radius: 4rpx 4rpx 0px 4rpx;
					
				}
			}
			
		}
	}

	
	
	.btn-box{
		height: 128rpx;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 20rpx 40rpx;
		z-index: 3;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); 
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		view{
			font-size: $font-size-lg;
			text-align: center;
			
			border-radius: 44rpx;
			line-height: 88rpx;
			color: $fff;
		}
		.btn{
			background: $uni-color-primary;
		}
		.contact{
			border: 1px solid $uni-color-primary;
			color: $uni-color-primary;
			padding: 0 40rpx;
			margin-right: 50rpx;
		}
	}

	

	.adjustment{
		background-color: #FFFFFF;
		width: 590rpx;
		border-radius: $border-radius-base;
		overflow: hidden;
		.title{
			text-align: center;
			padding: 48rpx 0;
			font-size: 36rpx;
			font-weight: 600;
		}
		.msg{
			padding: 0 30rpx;
			.item{
				margin-top: 28rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 1px solid #EEEEEE;
				padding: 0 30rpx;
				input{
					height: 100%;
					font-size: 28rpx;
				}
			}
			.satets{
				view{
					line-height: 56rpx;
					border: 1px solid #EEEEEE;
					padding: 0 30rpx;
					border-radius: 56rpx;
					&.active{
						background-color: $uni-color-primary;
						border: 1px solid $uni-color-primary;
						color: $fff;
					}
				}
			}
		}
		.btns{
			height: 88rpx;
			line-height: 88rpx;
			margin-top: 50rpx;
			.cancel{
				color: #4C4C4C;
				font-size: 32rpx;
				flex: 1;
				text-align: center;
				border-top: 1px solid #EEEEEE;
			}
			.ok{
				flex: 1;
				text-align: center;
				color: #FFFFFF;
				background-color: $uni-color-primary;
				font-size: 32rpx;
			}
		}
	}
}
</style>
